import Vue from 'vue'
import store from '@/store'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

Vue.use(VueRouter)

const routes = [
  { path: '/login', name: 'login', component: () => import('@/views/login') },
  { path: '/', redirect: '/layout/dashboard', component: () => import('@/views/layout') },
  {
    path: '/layout',
    name: 'layout',
    component: () => import('@/views/layout'),
    children: [
      { path: 'dashboard', name: 'dashboard', meta: { name: '工作台' }, component: () => import('@/views/dashboard') },
      { path: 'Managewarehouse', name: 'Managewarehouse', meta: { name: '仓库管理' }, component: () => import('@/views/warehouse/Managewarehouse.vue') },
      { path: 'Managewarehouse/add', name: 'add', meta: { name: '新增仓库' }, component: () => import('@/views/warehouse/components/add.vue') },
      { path: 'kqgl', name: 'kqgl', meta: { name: '库区管理' }, component: () => import('@/views/warehouse/kqgl.vue') },
      { path: 'kqgl/kqgl-add', name: 'kqgl-add', meta: { name: '新增库区' }, component: () => import('@/views/warehouse/components/kqgl-add.vue') },
      { path: 'kwgl', name: 'kwgl', meta: { name: '库位管理' }, component: () => import('@/views/warehouse/kwgl.vue') },
      { path: 'kwgl/kwgl-add', name: 'kwgl-add', meta: { name: '新增库位' }, component: () => import('@/views/warehouse/components/kwgl-add.vue') },
      { path: 'location-view', name: 'location-view', meta: { name: '库位视图' }, component: () => import('@/views/warehouse/location-view.vue') },
      { path: 'goods', name: 'goods', meta: { name: '货品管理' }, component: () => import('@/views/warehouse/goods.vue') },
      { path: 'goods/goods-add', name: 'goods-add', meta: { name: '新增货品' }, component: () => import('@/views/warehouse/components/goods-add.vue') },
      { path: 'goodstype', name: 'goodstype', meta: { name: '货品类型管理' }, component: () => import('@/views/warehouse/goodstype.vue') },
      { path: 'goods-owner', name: 'goods-owner', meta: { name: '货主管理' }, component: () => import('@/views/Owner/goods-owner') },
      { path: 'goods-owner/detail/:id', name: 'goods-owner-detail', meta: { name: '货主详情' }, component: () => import('@/views/Owner/detail.vue') },
      { path: 'goods-owner/goods-owner-add/:id', name: 'goods-owner-add', meta: { name: '编辑货主' }, component: () => import('@/views/Owner/goods-owner-add') },
      { path: 'task-picking', name: 'task-picking', meta: { name: '承运商管理' }, component: () => import('@/views/Owner/task-picking.vue') }
    ]
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // 每次切换页面时，调用进度条
  NProgress.start()
  // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
  // console.log(store)
  // console.log(to.meta.name)
  console.log('to.path====>', to.path)
  if (to.path !== '/login') {
    if (to.path && store.state.Page.filter(i => i.path !== '/layout/dashboard')?.filter(i => i.path === to.path).length === 0) {
      if (to.meta.name !== '工作台') {
        if (to.path === '/layout/goods-owner/goods-owner-add/null') {
          store.dispatch('asyncAddPage', { name: '新增货主', path: to.path })
        } else {
          store.dispatch('asyncAddPage', { name: to.meta.name, path: to.path })
        }
      }
    }
  }

  // if (to.meta.name && store.state.Page.filter(i => i.name === to.meta.name).length === 0) {
  //   store.dispatch('asyncAddPage', { name: to.meta.name, path: to.path })
  // }
  store.dispatch('asyncsetpath', to.path)
  next()
})
router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done()
})

export default router
